<template>
  <!-- 内容-->
  <div class="text item" style="height: auto;width: 100%; background-color: #EDEDED">
    <!-- 轮播图 -->
    <!-- 轮播图 -->
    <el-card class="son-content" style="width: 85%;height: 526px;margin: 0 auto 40px;">
      <div class="carousel-container">
        <el-carousel :interval="3000" arrow="always" height="670px">
          <el-carousel-item v-for="(item, index) in carouselItems" :key="index">
            <!-- 使用 max-width: 100% 让图片自适应宽度 -->
            <!--            <a href="https://gitee.com/kelingo/hua-zai-mall" target="_blank">-->
            <img :src="item.image" alt="carousel-image" style="max-width: 100%; height: auto;">
            <!--            </a>-->
          </el-carousel-item>
        </el-carousel>
      </div>
    </el-card>

    <!-- 商品列表 -->
    <el-card class="box-card" style="width: 85%; height: auto; margin: 0 auto 40px;">
      <div slot="header" class="clearfix">
        <div>
          <h2>热门商品</h2>
          <el-row :gutter="20">
            <el-col v-for="product in products" :key="product.productId" :span="8">
              <router-link :to="'/mall/buy?id=' + product.productId" class="card-link">
                <el-card class="card-with-hover-shadow" shadow="hover">
                  <img :src="product.productImageUrl" class="product-image" alt="商品图片" style="object-fit: contain; max-width: 100%; max-height: 100%;">
                  <div class="product-info" style="text-align: center">
                    <h3 style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ product.productName }}</h3>
                    <p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;font-size: 12px">{{ product.productDescription }}</p>
                    <p class="product-price" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">价格: {{ product.productPrice }}</p>
                  </div>
                </el-card>
              </router-link>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>

    <!-- 官方精选 -->
    <el-card class="box-card" style="width: 85%; height: auto; margin: 0 auto 40px;">
      <div slot="header" class="clearfix">
        <div>
          <h2>官方精选</h2>
          <el-row :gutter="20">
            <el-col v-for="product in productSelect" :key="product.productId" :span="8">
              <router-link :to="'/mall/buy?id=' + product.productId" class="card-link">
                <el-card class="card-with-hover-shadow" shadow="hover">
                  <img :src="product.productImageUrl" class="product-image" alt="商品图片" style="object-fit: contain; max-width: 100%; max-height: 100%;">
                  <div class="product-info" style="text-align: center">
                    <h3 style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">{{ product.productName }}</h3>
                    <p style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;font-size: 12px">{{ product.productDescription }}</p>
                    <p class="product-price" style="white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">价格: {{ product.productPrice }}</p>
                  </div>
                </el-card>
              </router-link>
            </el-col>
          </el-row>
        </div>
      </div>
    </el-card>

  </div>
</template>

<script>
import IndexMaster from '@/views/mall/index.vue'
export default {
  // eslint-disable-next-line vue/no-unused-components
  components: { IndexMaster },
  data() {
    return {
      carouselItems: [
        { image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/banner-mate60.png' },
        { image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/banner-matex5.png' },
        { image: 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/banner-p60-pro-white.png' }
        // 添加更多的轮播项
      ],
      products: [
        {
          'productId': 2,
          'productName': '蜂花一号',
          'productDescription': '运动鞋',
          'productPrice': 1000.00,
          'productImageUrl': 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/iphone-13-pro-family-hero.png',
          'productStock': 1002,
          'creationDate': '2023-09-20T09:02:18.000+00:00',
          'updateDate': '2023-09-23T08:18:30.000+00:00',
          'categoryId': 1,
          'sellerId': 1
        }],
      productSelect: [
        {
          'productId': 2,
          'productName': '蜂花一号',
          'productDescription': '运动鞋',
          'productPrice': 1000.00,
          'productImageUrl': 'https://newbee-mall.oss-cn-beijing.aliyuncs.com/images/iphone-13-pro-family-hero.png',
          'productStock': 1002,
          'creationDate': '2023-09-20T09:02:18.000+00:00',
          'updateDate': '2023-09-23T08:18:30.000+00:00',
          'categoryId': 1,
          'sellerId': 1
        }]
    }
  },
  created() {
    this.getProduct()
    this.getProductSelect()
  },
  methods: {
    // 查询分页数据
    getProduct() {
      this.$store
        .dispatch('product/getIndex', {
          productId: this.$route.query.id
        })
        .then((res) => {
          if (res.code === 0) {
            this.products = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
    },
    getProductSelect() {
      this.$store
        .dispatch('product/getIndexSelect', {
          productId: this.$route.query.id
        })
        .then((res) => {
          if (res.code === 0) {
            this.productSelect = res.data
          } else {
            this.$message.error(res.msg)
          }
        })
    }
  }
}
</script>

<style>
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.box-card {
  width: 100%;
  margin: 0 auto;
  padding: 0; /* 消除内边距 */
}

.son-content {
  width: 100%;
  height: auto;
  /* 添加其他样式，例如边距等 */
}

.carousel-container {
  max-width: 800px;
  margin: auto;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}
//页尾css
.footer-section h3 {
  font-size: 18px;
  margin-bottom: 10px;
}

.footer-section p {
  margin: 5px 0;
}
//商品图片
.product-card {
  width: 250px; /* 设置卡片宽度 */
  height: 300px; /* 设置卡片高度 */
}

.product-image {
  width: 100%; /* 设置图片宽度占满卡片 */
  height: 150px;
  object-fit: cover;
}

.product-info {
  padding: 10px;
  text-align: left;
}

.product-info h3 {
  margin-top: 10px;
}

.product-price {
  color: #ff6600;
  font-weight: bold;
  margin-top: 10px;
}
.card-link {
  text-decoration: none; /* 移除下划线 */
}

.card-with-hover-shadow {
  transition: box-shadow 0.3s;
}

.card-with-hover-shadow:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.carousel-container {
  max-width: 100%; /* 限制轮播图容器的最大宽度为100% */
  overflow: hidden; /* 隐藏超出容器的部分，确保图片不会溢出 */
}

.carousel-container img {
  width: 100%; /* 让图片宽度铺满轮播图容器 */
  height: auto; /* 让高度自适应，保持图片比例 */
}

</style>
